<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师资格证管理系统 - 登录</title>
    <script src="js/login.js"></script>
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <div class="login-container">
        <!-- 左侧系统信息 -->
        <div class="left-panel">
            <div class="system-info">
                <div class="system-logo">
                    <div class="system-logo-icon">📚</div>
                    <h1 class="text-xl font-bold">教师资格证管理系统</h1>
                </div>
                <h2 class="system-title">
                    专业、高效的<br>教师资格管理平台
                </h2>
                <p class="system-description">
                    提供全方位的教师资格申请、审核、认证和管理服务，助力教育部门高效管理教师资源。
                </p>
                <div class="feature-list">
                    <div class="feature-item">
                        <div class="feature-icon">📝</div>
                        <div class="feature-content">
                            <h3 class="feature-title">在线申请</h3>
                            <p class="feature-description">便捷的在线申请流程，减少纸质材料</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🕒</div>
                        <div class="feature-content">
                            <h3 class="feature-title">实时进度</h3>
                            <p class="feature-description">随时查看申请审核进度</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🔍</div>
                        <div class="feature-content">
                            <h3 class="feature-title">资格查询</h3>
                            <p class="feature-description">便捷查询教师资格信息</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>© 2025 教师资格证管理系统 【肖美芳】版权所有</p>
            </div>
            <!-- 背景装饰 -->
            <div class="decorative-elements">
                <div class="decorative-circle" style="width: 200px; height: 200px; top: -50px; right: -50px;"></div>
                <div class="decorative-circle" style="width: 120px; height: 120px; top: 30%; left: 10%;"></div>
                <div class="decorative-circle" style="width: 160px; height: 160px; bottom: 20%; right: 15%;"></div>
                <div class="decorative-circle" style="width: 240px; height: 240px; bottom: -80px; left: -80px;"></div>
            </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="right-panel">
            <div class="login-card">
                <h2 class="login-title">欢迎登录</h2>
                <p class="login-subtitle">请输入账号密码登录系统</p>

                <form id="loginForm">
                    <div class="form-group">
                        <label for="username" class="form-label">用户名</label>
                        <div class="form-input-container">
                            <span class="form-input-icon">👤</span>
                            <input type="text" id="username" name="username" class="form-input" placeholder="请输入用户名"
                                required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="form-label">密码</label>
                        <div class="form-input-container">
                            <span class="form-input-icon">🔒</span>
                            <input type="password" id="password" name="password" class="form-input" placeholder="请输入密码"
                                required>
                            <button type="button" id="togglePassword" class="password-toggle">
                                👁️
                            </button>
                        </div>
                    </div>

                    <div class="remember-me">
                        <input type="checkbox" id="remember" name="remember">
                        <label for="remember">记住我</label>
                    </div>

                    <button type="submit" class="login-button">
                        登录
                    </button>
                </form>

                <!-- 登录错误提示 -->
                <div id="errorMessage" class="error-message">
                    <div class="error-box">
                        <div class="error-icon">⚠️</div>
                        <div class="error-text">用户名或密码错误，请重试</div>
                    </div>
                </div>

                <div class="forgot-password">
                    <a href="#">忘记密码?</a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>